<template>
    <div class="container">
        <div class="cate f">
            <div class="left">
                <div class="title-box f fac fpj">
                    <div class="title">国产</div>
                    <div class="more">更多</div>
                </div>
                <div class="list f fac fpj">
                    <div class="item" v-for="item in moives">
                        <img :src="item.url" alt="">
                        <div class="name">{{ item.name }}</div>
                        <div class="cate">{{ item.cate }}</div>
                    </div>
                </div>
                <div class="text-list f fac">
                    <div class="item f fac fpj" v-for="item in moivesText">
                        <div>{{ item.name }}</div>
                        <div style="color: #999;">{{ item.cate }}</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title-box f fac fpj">
                    <div class="title">国产周榜单</div>
                </div>
                <div class="list">
                    <div class="item f fac fpj" v-for="item in dzList">
                        <div class="name">{{ item.name }}</div>
                        <div class="score">{{ item.score }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cate f">
            <div class="left">
                <div class="title-box f fac fpj">
                    <div class="title">欧美剧</div>
                    <div class="more">更多</div>
                </div>
                <div class="list f fac fpj">
                    <div class="item" v-for="item in moives">
                        <img :src="item.url" alt="">
                        <div class="name">{{ item.name }}</div>
                        <div class="cate">{{ item.cate }}</div>
                    </div>
                </div>
                <div class="text-list f fac">
                    <div class="item f fac fpj" v-for="item in moivesText">
                        <div>{{ item.name }}</div>
                        <div style="color: #999;">{{ item.cate }}</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title-box f fac fpj">
                    <div class="title">欧美剧周榜单</div>
                </div>
                <div class="list">
                    <div class="item f fac fpj" v-for="item in dzList">
                        <div class="name">{{ item.name }}</div>
                        <div class="score">{{ item.score }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cate f">
            <div class="left">
                <div class="title-box f fac fpj">
                    <div class="title">香港剧</div>
                    <div class="more">更多</div>
                </div>
                <div class="list f fac fpj">
                    <div class="item" v-for="item in moives">
                        <img :src="item.url" alt="">
                        <div class="name">{{ item.name }}</div>
                        <div class="cate">{{ item.cate }}</div>
                    </div>
                </div>
                <div class="text-list f fac">
                    <div class="item f fac fpj" v-for="item in moivesText">
                        <div>{{ item.name }}</div>
                        <div style="color: #999;">{{ item.cate }}</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title-box f fac fpj">
                    <div class="title">香港剧周榜单</div>
                </div>
                <div class="list">
                    <div class="item f fac fpj" v-for="item in dzList">
                        <div class="name">{{ item.name }}</div>
                        <div class="score">{{ item.score }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>    
    import nz from "@/assets/nz.png"
    const moives = ref([
        { name: '变形金刚', url: nz, cate: '科幻/动作' },
        { name: '哪吒之魔童降世', url: nz,  cate: '动画/剧情' },
        { name: '碟中谍', url: nz, cate: '悬疑/动作' },
        { name: '芭比', url: nz, cate: '喜剧/奇幻' },
        { name: '碟中谍', url: nz, cate: '悬疑/动作' },
        { name: '芭比', url: nz, cate: '喜剧/奇幻' },
        { name: '碟中谍', url: nz, cate: '悬疑/动作' },
        { name: '芭比', url: nz, cate: '喜剧/奇幻' },
        { name: '碟中谍', url: nz, cate: '悬疑/动作' },
        { name: '芭比', url: nz, cate: '喜剧/奇幻' },
        { name: '芭比', url: nz, cate: '喜剧/奇幻' },
        { name: '碟中谍', url: nz, cate: '悬疑/动作' },
    ])

    const moivesText = ref([
        { name: '少林与武当', cate: 'HD' },
        { name: '卧虎藏龙', cate: '4K' },
        { name: '英雄', cate: 'HD' },
        { name: '功夫', cate: 'FHD' },
        { name: '一代宗师', cate: '4K' },
        { name: '叶问', cate: 'HD' },
        { name: '霍元甲', cate: 'FHD' },
        { name: '黄飞鸿', cate: 'HD' },
        { name: '新龙门客栈', cate: '4K' },
        { name: '东邪西毒', cate: 'HD' },
        { name: '大话西游', cate: 'FHD' },
        { name: '唐伯虎点秋香', cate: 'HD' },
        { name: '功夫熊猫', cate: '4K' },
        { name: '让子弹飞', cate: 'HD' },
        { name: '无间道', cate: 'FHD' },
        { name: '霸王别姬', cate: '4K' },
        { name: '红高粱', cate: 'HD' },
        { name: '活着', cate: 'FHD' },
        { name: '阳光灿烂的日子', cate: '4K' },
        { name: '甲方乙方', cate: 'HD' }
    ])

    const dzList = ref([
        { name: '肖申克的救赎', score: 9.8 },
        { name: '霸王别姬', score: 9.7 },
        { name: '阿甘正传', score: 9.6 },
        { name: '这个杀手不太冷', score: 9.5 },
        { name: '泰坦尼克号', score: 9.4 },
        { name: '盗梦空间', score: 9.3 },
        { name: '星际穿越', score: 9.2 },
        { name: '楚门的世界', score: 9.1 },
        { name: '海上钢琴师', score: 9.0 },
        { name: '三傻大闹宝莱坞', score: 8.9 },
    ])
</script>

<style lang="scss" scoped>
    .container {
        width: 80%;
        padding-top: 40px;
        .cate {
            width: 100%;
            margin-top: 40px;
            .left {
               width: 70%; 
               margin-right: 24px;
               .title-box {
                    font-size: 28px;
                    border-bottom: 1px solid #ddd;
                    padding-bottom: 4px;
                    .more {
                        font-size: 18px;
                        color: #333;
                    }
               }
               .list {
                    margin-top: 24px;
                    flex-wrap: wrap;
                    .item {
                        margin-right: 24px;
                        margin-bottom: 24px;
                        img {
                            width: 150px;
                            height: 225px;
                        }
                        .name {
                            font-size: 16px;
                            margin: 4px 0;
                            color: #333;
                        }
                        .cate {
                            font-size: 14px;
                            color: #999;
                        }
                    }
               }
               .text-list {
                    color: #333;
                    flex-wrap: wrap;
                    .item {
                        width: 25%;
                        border-top: 1px solid #ddd;
                        padding: 8px 0;
                        padding-right: 8px;
                        cursor: pointer;
                        &:hover {
                            color: var(--el-color-primary);
                        }
                    }
               }
            }
            .right {
                width: 30%;
                .title-box {
                    font-size: 28px;
               }
               .list {
                    margin-top: 24px;
                    .item {
                        font-size: 18px;
                        padding: 12px;
                        .score {
                            color: #666;
                        }
                        &:hover {
                            background-color: #eee;
                        }
                    }
               }
            }
        }
    }
</style>